<template>
    <Modal okText="确定" cancelText="取消" :open="open" title="文本内容" @cancel="handleCancel" @ok="handleOk">
        <a-alert message="仅支持自动获取公众号文章的标题/描述/封面" type="warning" show-icon />
        <a-form :model="data" name="link-form" class="link-form">
            <a-form-item label="链接" name="link">
                <a-input />
            </a-form-item>
            <a-form-item label="标题" name="title">
                <a-input />
            </a-form-item>
            <a-form-item label="描述" name="desc">
                <a-input />
            </a-form-item>
        </a-form>
    </Modal>
</template>

<script setup lang="ts">
import {reactive, ref} from "vue";
import {Modal, Form} from "ant-design-vue";
const open = ref(false);

interface FormState {
    url: string;
    title: string;
    desc: string;
}
const data = reactive<FormState>({
    url: "",
    title: "",
    desc: "",
});

const requiredConfig = [
    {
        required: true,
        message: "请输入",
    },
];
const rulesRef = reactive({
    url: requiredConfig,
    title: requiredConfig,
    desc: requiredConfig,
});

const {validate} = Form.useForm(data, rulesRef);

const handleOpen = () => {
    open.value = true;
};
const handleCancel = () => {
    open.value = false;
};
const handleOk = async () => {
    try {
        const res = await validate();
        console.log("res", res);
        return res;
    } catch (error) {}
};

defineExpose({
    show: handleOpen,
    submit: handleOk,
});
</script>
<style lang="less" scoped>
.link-form {
    margin-top: 12px;
}
</style>
